<template>
  <div>
    <div class="invite">
      <div class="invite-bg">
        <img src="/src/assets/user-center/invite-bg.png">
        <div class="profit">{{info.profit_amount}}</div>
        <span class="bonus">{{info.bonus_amount === 0 ? '暂无额外奖励Bonus奖励！' : `额外奖励Bonus奖励${info.bonus_amount}元！`}}</span>
        <span class="invite-user">{{info.num}}</span>
        <div class="invite-click" @click="$router.push({name: 'InviteList'})"></div>
        <div class="profit-click" @click="$router.push({name: 'ProfitList'})"></div>
        <div class="bonus-click" @click="$router.push({name: 'BonusList'})"></div>
        <img src="/src/assets/user-center/invite-rule-false.png" class="invite-word">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Invite',
    data () {
      return {
        info: []
      }
    },
    methods: {
      getInfo () {
        this.$post('/vue/my/recommend').then(data => {
          this.info = data
        })
      }
    },
    mounted () {
      this.getInfo()
      this.wechatShare({userShare: true})
    }
  }
</script>

<style lang="less">
  @font-face {
    font-family: DFPKanTingLiuW9;
    src: url('/src/assets/font/华康勘亭流W9.ttf');
  }
  @font-face {
    font-family: DFFangYuanW7;
    src: url('/src/assets/font/华康方圆体.ttc');
  }
  .invite {
    .invite-bg {
      position: relative;
      .profit {
        width: 31vw;
        position: absolute;
        top: 7.2%;
        left: 51%;
        z-index: 1;
        font-size: 3.6rem;
        line-height: 3rem;
        color: rgb(252, 82, 0);
        font-family: DFPKanTingLiuW9;
        text-shadow: 0 2px 2px rgb(149, 52, 5);
      }
      .bonus {
        position: absolute;
        top: 10.1%;
        left: 0;
        right: 0;
        margin:  auto;
        z-index: 1;
        font-size: 1.4rem;
        line-height: 1.25rem;
        color: rgb(54, 44, 81);
        font-family: DFFangYuanW7;
        letter-spacing: 1px;
      }
      .invite-user {
        position: absolute;
        top: 12.2%;
        left: 64%;
        z-index: 1;
        font-size: 3rem;
        line-height: 3.5rem;
        color: rgb(255, 125, 0);
        font-family: PingFangTC;
      }
      .invite-click, .profit-click, .bonus-click {
        width: 70vw;
        height: 17vw;
        position: absolute;
        left: 15%;
        z-index: 1;
      }
      .invite-click {
        top: 69.5%;
      }
      .profit-click {
        top: 75.4%;
      }
      .bonus-click {
        top: 81%;
      }
      .invite-word {
        width: 92%;
        height: auto;
        position: absolute;
        top: 90%;
        left: 4%;
        z-index: 1;
      }
    }
  }
</style>